<script lang="ts" setup>
import { commonTransform } from '@/utils/transform';

import { searchOrder } from '@/api/order';
import type { ISearchParams, IOrder } from '@/types/request'
import type { ColumnsType, ColumnType } from 'ant-design-vue/es/table'
import type { TransformOrder } from '@/types/table-transform';

// 转换数据格式
function transformOrder(order: IOrder): TransformOrder {
  return {
    ...commonTransform(order),
  }
}

// 表格列表
const columns = ref<ColumnsType>([
  {
    title: '订单号',
    dataIndex: 'out_trade_no',
    key: 'out_trade_no',
    width: 320,
    align:'center',
    fixed: true
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
    align:'center',
    width: 150
  },
  {
    title: '用户ID',
    dataIndex: 'account_id',
    key: 'account_id',
    align:'center',
    width: 100
  },
  {
    title: '用户头像',
    dataIndex: 'user_head_img',
    key: 'user_head_img',
    align:'center',
    width: 100,
    showImage: true
  },
  {
    title: '课程ID',
    dataIndex: 'product_id',
    key: 'product_id',
    align:'center',
    width: 80
  },

  {
    title: '订单状态',
    dataIndex: 'order_state',
    key: 'order_state',
    align:'center',
    width: 100
  },
  {
    title: '订单总金额',
    dataIndex: 'total_amount',
    key: 'total_amount',
    align:'center',
    width: 120
  },
  {
    title: '实际支付金额',
    dataIndex: 'pay_amount',
    key: 'pay_amount',
    align:'center',
    width: 140
  },
  {
    title: '课程标题',
    dataIndex: 'product_title',
    key: 'product_title',
    align:'center',
    width: 300,
    ellipsis: true
  },
  {
    title: '课程图片',
    dataIndex: 'product_img',
    key: 'product_img',
    align:'center',
    width: 140,
    showImage: true
  },
])

// 表格数据
let realDataSource = ref<TransformOrder[]>([])

// 搜索参数
const searchParams = reactive<ISearchParams>({
  page: 1,
  size: 5,
  total: 0,
  condition: '',
  gmt_end: '',
  gmt_start: '',
})

// 搜索方法
async function handleRequest() {
  const response = await searchOrder(searchParams)
  realDataSource.value = response.data?.current_data?.map((item: IOrder) => transformOrder(item))
  return response
}

</script>

<template>
  <div>
    <Search show-time name="订单" :search-params="searchParams" :on-search-request="handleRequest" />
    <Table :search-params="searchParams" :expand-columns="columns" :real-data-source="realDataSource"
      :on-request="handleRequest" />
  </div>
</template>
